<template>
  <el-scrollbar>
    <div class="community-bottom-component" v-loading="isLoading">

      <el-card v-for="(activity, index) in activities" :key="index" class="post-item"
        @click.native="viewDetail(activity.postId)">

        <template #header>
          <div class="post-header">

            <el-image :src="activity.avatarUrl" class="post-avatar"></el-image>

            <div class="post-header-info">
              <el-row class="post-name">
                {{ activity.name }}
              </el-row>
              <el-row class="post-publish-time">
                {{ activity.publishTime }}
              </el-row>
            </div>

          </div>
        </template>

        <div class="post-content">

          <p>
            <el-text line-clamp="1" class="post-title">
              {{ activity.title }}
            </el-text>
          </p>

          <p>
            <el-text line-clamp="3" class="post-content">
              {{ activity.postContent.content }}
            </el-text>
          </p>

          <div class="image-list">
            <el-image v-for="(url, idx) in activity.postContent.fileUrlList" :src="url" :key="idx" class="post-image" />
          </div>
        </div>
      </el-card>

      <div class="pagination">
        <el-pagination layout="prev, pager, next" :current-page="pageNum" :page-size="pageSize" :total="total"
          @current-change="handlePageChange" />
      </div>
    </div>
  </el-scrollbar>
</template>

<script>
import { Card, Image, ElMessage, Pagination } from 'element-plus';
import axios from 'axios';

export default {
  name: 'CommunityBottomComponent',
  components: {
    ElCard: Card,
    ElImage: Image,
    ElPagination: Pagination,
  },
  props: {
    clubId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      activities: [],
      pageNum: 1,
      pageSize: 4,
      total: 0,
      isLoading: true
    };
  },
  created() {
    this.fetchActivities();
  },
  methods: {
    async fetchActivities() {
      try {
        const response = await axios.get('/post/postList', {
          params: {
            clubId: this.clubId,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
          },
        });

        if (response.data.code === 0) {
          this.activities = response.data.data.records.map(record => ({
            ...record,
            postContent: JSON.parse(record.postContent), // 解析 postContent
            commentInput: ''
          }));
          this.total = response.data.data.total;

          this.isLoading = false;
        } else {
          ElMessage.error(`获取动态列表失败：${response.data.message}`);
          this.isLoading = false;
        }
      } catch (error) {
        if (error.response && error.response.status !== 401) {
          console.error('Error fetching activities:', error);
          if (error && error.response) {
            ElMessage.error(`获取动态列表失败：${error.response.data?.message || error.response.statusText}`);
          } else if (error && error.request) {
            ElMessage.error('获取动态列表失败：未收到服务器响应');
          } else {
            ElMessage.error(`获取动态列表失败：${error.message}`);
          }
        }
      }
    },
    handlePageChange(newPage) {
      this.pageNum = newPage;
      this.fetchActivities();
    },
    viewDetail(postId) {
      this.$emit('view-detail', postId);
    },
    truncateContent(content) {
      if (content.length > 100) {
        return content.substring(0, 100) + '......';
      }
      return content;
    }
  }
};
</script>

<style scoped>
.community-bottom-component {
  padding: 20px;
  background-color: #ffffff;
  /* border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
}

.post-item {
  cursor: pointer;
  margin: 10px 0;
  border-radius: 10px;
}

.post-header {
  display: flex;
  align-items: center;
}

.post-avatar {
  width: 50px;
  height: auto;
  border-radius: 50%;
  margin-right: 20px;
  border: 1px solid rgba(102, 102, 102, 0.3);
}

.post-header-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.post-name {
  font-size: 16px;
  font-weight: bold;
  text-align: left;
}

.post-publish-time {
  font-size: 12px;
  color: #999;
}

.post-title {
  font-size: 20px;
  font-weight: bold;
}

.post-content {
  font-size: 14px;
  color: #666;
  text-align: left;
  white-space: pre-wrap;
}

.image-list {
  display: flex;
  justify-content: center;
}

.post-image {
  width: 100px;
  height: 100px;
  margin: 10px;
  border-radius: 5px;
  border: 1px solid rgba(102, 102, 102, 0.1);
}

.pagination {
  display: flex;
  justify-content: center;
  margin: 20px;
}
</style>
